<div class="w-full">
  <div class="p-6">
    <div id="dropzone" data-controller="ui--dropzone" data-action="click->ui--dropzone#trigger drop->ui--dropzone#acceptFiles">
      <button
        class="w-full rounded-lg bg-muted border-2 border-dashed border-gray-300 p-8 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto h-12 w-12 text-gray-400"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z" /><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8" /><path d="M15 2v5h5" /></svg>
        <span class="mt-2 block text-sm font-semibold text-muted-foreground dark:text-white">Drag Files to Upload or Click Here</span>
      </button>
      <input type="file" class="hidden" multiple data-ui--dropzone-target="fileInput" data-action="change->ui--dropzone#acceptFiles">
    </div>
  </div>
</div>
